<template>
  <div class="consult-entry-container">
    <!-- 数字人+问诊引导卡片 -->
    <div class="entry-card">
      <!-- 3D数字人区域 -->
      <div class="digital-human">
        <!-- 集成DigitalHuman组件 -->
        <DigitalHuman 
          ref="digitalHumanRef"
          expression="smile"
          action="idle"
          :isSpeaking="false"
          :visible="true"
          @load="onDigitalHumanLoad"
          @error="onDigitalHumanError"
        />
      </div>
      
      <!-- 问诊引导文字区 -->
      <div class="entry-guide">
        <h2 class="guide-title">您好！我是您的智能导诊助手</h2>
        <p class="guide-desc">描述您的症状，我来帮您推荐科室、生成病历，让就医更高效～</p>
        
        <!-- 问诊入口按钮 -->
        <div class="entry-btns">
          <el-button 
            type="primary" 
            size="large" 
            class="voice-btn"
            @click="startVoiceConsult"
          >
            <el-icon><Microphone /></el-icon>
            开始语音问诊
          </el-button>
          <el-button 
            type="default" 
            size="large" 
            class="text-btn"
            @click="startTextConsult"
          >
            <el-icon><Edit /></el-icon>
            文字输入症状
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- 快捷功能入口 -->
    <div class="quick-functions">
      <div class="function-item" @click="goToDepartment">
        <div class="item-icon bg-blue"><DepartmentIcon /></div>
        <p class="item-text">科室查询</p>
      </div>
      <div class="function-item" @click="goToQueue">
        <div class="item-icon bg-green"><QueueIcon /></div>
        <p class="item-text">排队查询</p>
      </div>
      <div class="function-item" @click="goToMedicalRecord">
        <div class="item-icon bg-orange"><RecordIcon /></div>
        <p class="item-text">病历查询</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElButton, ElIcon } from 'element-plus';
import { Microphone, Edit } from '@element-plus/icons-vue';
// 自定义图标组件
import DepartmentIcon from '@/components/icons/DepartmentIcon.vue';
import QueueIcon from '@/components/icons/QueueIcon.vue';
import RecordIcon from '@/components/icons/RecordIcon.vue';
// 导入DigitalHuman组件
import DigitalHuman from '@/views/home/DigitalHuman.vue';
import { useRouter } from 'vue-router';
import { useConsultStore } from '@/stores/consult';

const router = useRouter();
const digitalHumanRef = ref(null);
const consultStore = useConsultStore();

// 数字人加载完成处理
const onDigitalHumanLoad = () => {
  console.log('数字人加载完成');
  
  // 数字人加载完成后开始问候动画
  setTimeout(() => {
    if (digitalHumanRef.value) {
      // 可以调用数字人的方法进行交互
      // digitalHumanRef.value.startAnimation('greeting');
    }
  }, 500);
};

// 数字人加载错误处理
const onDigitalHumanError = (err) => {
  console.error('数字人加载错误:', err);
};

// 组件挂载时初始化
onMounted(() => {
  // 初始化咨询状态
  consultStore.resetConsult();
});

// 开始语音问诊（跳转至问诊页，标记输入类型为语音）
const startVoiceConsult = () => {
  router.push({ path: '/consult', query: { inputType: 'voice' } });
};
// 开始文字问诊
const startTextConsult = () => {
  router.push({ path: '/consult', query: { inputType: 'text' } });
};
// 跳转科室查询
const goToDepartment = () => router.push('/department-recommend');
// 跳转排队查询
const goToQueue = () => router.push('/queue');
// 跳转病历查询
const goToMedicalRecord = () => router.push('/medical-record');
</script>

<style scoped>
.consult-entry-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 24px;
}
.entry-card {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 32px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  margin-bottom: 40px;
}
.digital-human {
  flex: 0 0 200px;
}
.human-img {
  width: 200px;
  height: 280px;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.animate-smile {
  transform: scale(1.05);
}
.entry-guide {
  flex: 1;
}
.guide-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 12px;
}
.guide-desc {
  font-size: 16px;
  color: #666;
  margin-bottom: 24px;
  line-height: 1.5;
}
.entry-btns {
  display: flex;
  gap: 16px;
}
.voice-btn {
  background-color: #3B82F6;
  border-color: #3B82F6;
}
.voice-btn:hover {
  background-color: #2563EB;
  border-color: #2563EB;
}
/* 快捷功能入口 */
.quick-functions {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.function-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
  cursor: pointer;
  transition: transform 0.2s;
}
.function-item:hover {
  transform: translateY(-4px);
}
.item-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
}
.bg-blue { background-color: #3B82F6; }
.bg-green { background-color: #10B981; }
.bg-orange { background-color: #F97316; }
.item-text {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}
</style>